import React from 'react';
import ReactDOM from 'react-dom';
import {HashRouter as Router, Route, Link} from 'react-router-dom'
import LazyRoute from './LazyRoute.js'

import loadApp1 from 'bundle-loader?lazy!./App1.js'
import loadApp2 from 'bundle-loader?lazy!./App2.js'

// const LazyRoute = ({component, ...rest})=> { // <LazyRoute path= component={loadApp1}>
//     const App = (props)=> {
//         return <Bundle load={component}>
//             {(App)=> {
//                 return <App {...props}/>
//             }}
//         </Bundle>;
//     }
//     return <Route {...rest} component={App}/>
// }

const App = ()=> {
    return (
        <Router>
            <div>
                <Link to="/a1">A1</Link>
                <div></div>
                <Link to="/a1/a2">A2</Link>
                <LazyRoute path="/a1" exact component={loadApp1}/>
                <LazyRoute path="/a1/a2" component={loadApp2}/>
            </div>
        </Router>
    );
}

ReactDOM.render(<App />, document.getElementById('root'));